@import '../../styles/default.less';
@import '../../styles/theme/base.less';

.button {
  box-sizing: border-box;
  padding: @spacing-none @spacing-6 @spacing-1 @spacing-6;
  color: @color-white;
  font-weight: @font-weight-400;
  font-size: @font-size-body-3;
  white-space: nowrap;
  border: none;
  outline: none;
  transition: all @transition-duration-1 @transition-timing-function-linear;
  .button-text {
    box-sizing: border-box;
    padding: @spacing-none @spacing-4 @spacing-none @spacing-4;
    text-align: center;
    vertical-align: baseline;
  }
  &:hover {
    cursor: pointer;
    filter: opacity(0.6);
  }

  .anticon:not(.anticon-spin) {
    transform: translateY(1.5px);
  }
}

/**
* type
*/
.button-primary {
  background-color: @color-primary-6;
  border-radius: @border-radius-default;
}

.button-secondary {
  color: @color-gray-10;
  background-color: @color-gray-3;
}

.button-dashed {
  color: @color-gray-10;
  background-color: @color-gray-2;
  border: @border-1 @border-dashed @color-gray-4;
}

.button-outline {
  color: @color-primary-6;
  background-color: @color-white;
  border: @border-1 @border-solid @color-primary-6;
}

/**
* size
*/
.button-small {
  height: @size-small;
  padding: @spacing-none @spacing-3 @spacing-1 @spacing-3;
  font-size: @font-size-body-1;
}

.button-medium {
  height: @size-default;
}

.button-large {
  height: @size-large;
  padding: @spacing-2 @spacing-8 @spacing-2 @spacing-8;
}

/**
* shape
*/
.button-small-circle {
  width: 22px;
  height: 22px;
  padding: 0;
  padding: 0;
  border-radius: @border-radius-circle;
  .button-text {
    padding: 0;
    font-size: 8px;
  }
}

.button-medium-circle {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: @border-radius-circle;
  .button-text {
    padding: 0;
  }
}

.button-large-circle {
  width: @size-11;
  height: @size-11;
  padding: 0;
  border-radius: @border-radius-circle;
  .button-text {
    padding: 0;
  }
}

.button-small-round {
  padding-bottom: 3px;
  border-radius: 12px;
}

.button-medium-round {
  border-radius: 16px;
}

.button-large-round {
  border-radius: 24px;
}

/**
* status
*/
.button-primary-success {
  color: @color-white;
  background-color: @color-success-6;
}

.button-primary-danger {
  color: @color-white;
  background-color: @color-danger-6;
}

.button-primary-warning {
  color: @color-white;
  background-color: @color-warning-6;
}

// ---------------------------------

.button-secondary-success {
  color: @color-success-6;
}

.button-secondary-danger {
  color: @color-danger-6;
}

.button-secondary-warning {
  color: @color-warning-6;
}

// ---------------------------------

.button-dashed-success {
  color: @color-success-6;
  border: @border-1 @border-dashed @color-success-6;
}

.button-dashed-danger {
  color: @color-danger-6;
  border: @border-1 @border-dashed @color-danger-6;
}

.button-dashed-warning {
  color: @color-warning-6;
  border: @border-1 @border-dashed @color-warning-6;
}

// ---------------------------------

.button-outline-success {
  color: @color-success-6;
  border: @border-1 @border-solid @color-success-6;
}

.button-outline-danger {
  color: @color-danger-6;
  border: @border-1 @border-solid @color-danger-6;
}

.button-outline-warning {
  color: @color-warning-6;
  border: @border-1 @border-solid @color-warning-6;
}

/**
* disabled
*/
.button-disabled {
  color: @color-gray-5;
  background-color: @color-gray-4;
  border: none;
  &:hover,
  &:focus {
    cursor: not-allowed;
    opacity: 1;
  }
}

// ---------------------------------
/**
* button-group
*/
.button-group {
  display: inline-block;
  .button-primary {
    border: none;
  }
  .button-primary:not(:last-child) {
    border-right: @border-1 @border-solid @color-white;
  }
  // ------------------------------------------------
  .button-secondary {
    border: none;
  }
  .button-secondary:not(:last-child) {
    border-right: @border-1 @border-solid @color-white;
  }
  // ------------------------------------------------
  .button-dashed:not(:last-child) {
    border-right: none;
  }
  // ------------------------------------------------

  .button-outline:not(:last-child) {
    border-right: none;
  }

  // ------------------------------------------------
  .button-small-round {
    border-right: @border-1 @border-solid @color-white;
  }
  .button-small-round:first-child {
    border-radius: 12px 0 0 12px;
  }
  .button-small-round:last-child {
    border-right: none;
    border-radius: 0 12px 12px 0;
  }
  .button-small-round:not(:last-child, :first-child) {
    border-radius: 0;
  }

  .button-medium-round {
    border-right: @border-1 @border-solid @color-white;
  }
  .button-medium-round:first-child {
    border-radius: 16px 0 0 16px;
  }
  .button-medium-round:last-child {
    border-right: none;
    border-radius: 0 16px 16px 0;
  }
  .button-medium-round:not(:last-child, :first-child) {
    border-radius: 0;
  }

  .button-large-round {
    border-right: @border-1 @border-solid @color-white;
  }
  .button-large-round:first-child {
    border-radius: 24px 0 0 24px;
  }
  .button-large-round:last-child {
    border-right: none;
    border-radius: 0 24px 24px 0;
  }
  .button-large-round:not(:last-child, :first-child) {
    border-radius: 0;
  }

  // --------------------------
  .button-outline.button-small-round:last-child {
    border-right: @border-1 @border-solid @color-primary-6;
  }
  .button-outline.button-medium-round:last-child {
    border-right: @border-1 @border-solid @color-primary-6;
  }
  .button-outline.button-large-round:last-child {
    border-right: @border-1 @border-solid @color-primary-6;
  }

  .button-dashed.button-small-round:last-child {
    border-right: @border-1 @border-dashed @color-primary-6;
  }
  .button-dashed.button-medium-round:last-child {
    border-right: @border-1 @border-dashed @color-primary-6;
  }
  .button-dashed.button-large-round:last-child {
    border-right: @border-1 @border-dashed @color-primary-6;
  }
  // ---------------------------
  .button-border-right(dashed, success, small, @border-dashed, @color-success-6);
  .button-border-right(dashed, success, medium, @border-dashed, @color-success-6);
  .button-border-right(dashed, success, large, @border-dashed, @color-success-6);

  .button-border-right(dashed, danger, small, @border-dashed, @color-danger-6);
  .button-border-right(dashed, danger, medium, @border-dashed, @color-danger-6);
  .button-border-right(dashed, danger, large, @border-dashed, @color-danger-6);

  .button-border-right(dashed, warning, small, @border-dashed, @color-warning-6);
  .button-border-right(dashed, warning, medium, @border-dashed, @color-warning-6);
  .button-border-right(dashed, warning, large, @border-dashed, @color-warning-6);

  .button-border-right(outline, success, small, @border-solid, @color-success-6);
  .button-border-right(outline, success, medium, @border-solid, @color-success-6);
  .button-border-right(outline, success, large, @border-solid, @color-success-6);

  .button-border-right(outline, danger, small, @border-solid, @color-danger-6);
  .button-border-right(outline, danger, medium, @border-solid, @color-danger-6);
  .button-border-right(outline, danger, large, @border-solid, @color-danger-6);

  .button-border-right(outline, warning, small, @border-solid, @color-warning-6);
  .button-border-right(outline, warning, medium, @border-solid, @color-warning-6);
  .button-border-right(outline, warning, large, @border-solid, @color-warning-6);
}

// 针对 button group 做一个 mixin
.button-border-right(@type, @status, @size, @border-style, @color) {
  .button-@{type}-@{status}.button-@{size}-round:last-child {
    border-right: @border-1 @border-style @color;
  }
}
